<template>
  <div :class="className" :style="{height:'calc(100vh - '+height+')',width:width}" />
</template>

<script>
  import * as echarts from 'echarts';
  import EleResize from '@/assets/js/esresize';
  require('echarts/theme/macarons') // echarts theme

  export default {
    mixins: [EleResize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '600px'
      },
      chartData: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        chart: null,
        //成功数
        screenIndex: 0,
        //失败数
        errorIndex: 0,
      }
    },
    watch: {
      chartData: {
        //true指的是数据还没有改变,上来就先执行一次监听
        // immediate: true,
        // 监听对象的话要用深度监听
        // deep: true,
        deep: true,
        handler(val) {
          this.$nextTick(() => {
            if (this.chartData.length > 0) {
              this.screenIndex = this.chartData.filter(item => item.pushStatus === '0').length
              this.errorIndex = this.chartData.length - this.screenIndex;
            }
            this.setOptions();
          });
        }
      }
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
      },
      setOptions() {
        this.chart.setOption()
      }
    }
  }
</script>
